import { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import styles from './index.module.sass';
import './index.css';
import { session, remove } from '../../../helper/storage';

const { TabPane } = Tabs;

interface Props {
    /**标签页的对应名称和组件 */
    tabs?: any[][]

    /**自定义的标签页更改事件 */
    onChange?: Function

    /**标签页的默认标题 */
    defaultTitle?: string

    /**标签页是否都保存页面数据 */
    isCache?: boolean

    /**不需要保存数据的标签页列表 */
    notCacheList?: string[]

    /**设置默认展示页 */
    defaultActiveKey?: string

    /**是否显示header */
    isHeader?: boolean

    /**标签页大小 */
    tabSize?: 'large' | 'default' | 'small'
}

const SimpleTab: React.FC<Props> = ({
    onChange,
    defaultTitle,
    tabs,
    isCache = true,
    notCacheList = [],
    defaultActiveKey,
    tabSize = 'large',
    isHeader = true
}) => {
    console.debug('SimpleTab', tabs);

    const [size] = useState<any>(tabSize);
    const [title, setTitle] = useState(() => {
        const tabKey = session('tabKey');
        const tabSwitch = session('tabSwitch');
        if (tabSwitch) {
            return tabKey && tabKey;
        } else {
            if (defaultActiveKey) {
                return defaultActiveKey;
            } else if (tabs && tabs.length > 1) {
                return tabs[0][0];
            }
        }
    });

    useEffect(() => {
        return () => remove('tabSwitch')
    }, [])

    function handleChange(key: any) {
        setTitle(key);
        session('tabKey', key);
        session('tabSwitch', true);
        onChange && onChange(key);
    }

    /**
     * 判断标签页是否需要需要缓存
     * @param key 当前页标识
     * @returns true：页面缓存、
     *          false：页面不展示
     *          key === title：不展示当前页时页面缓存
     */
    function cacheTabs(key: string) {
        if (notCacheList.find((item: string) => item === key)) {
            return key === title;
        } else {
            return isCache ? true : key === title;
        }
    }

    return (
        <article className={styles.wrapper}>
            {isHeader && <header className={styles.header}>
                <div className={styles.title}>{defaultTitle || title}</div>
            </header>}

            <Tabs
                size={size}
                defaultActiveKey={title}
                onChange={handleChange}
                className={`${styles.tabs} basicSimpleTab`}
            >
                {tabs && tabs.map((item: any) => (
                    <TabPane
                        tab={item[0]}
                        key={item[0]}
                        className={styles.tabPane}
                    >
                        {cacheTabs(item[0]) ? item[1] : null}
                    </TabPane>
                ))}
            </Tabs>
        </article>
    );
}

export default SimpleTab
